<template>
  <div class="wrap  w-1200">
    <div class="category-left">
      <div class="category-title" @click="showBanner">
        <img src="@/static/easydrug/homePage/category_icon.png" />
        <span class="text">商品分类</span>
      </div>
      <el-menu class="el-menu">
        <el-menu-item v-for="(categoryItem, categoryIndex) in categoryList" @click="handleSelect(categoryItem, categoryIndex)"
          :key="categoryIndex" :class="{ 'sel-category': selCategory == categoryIndex }">
          <span>{{ categoryItem.typeName }}</span>
          <i class="el-icon-arrow-right right-arrow"></i>
        </el-menu-item>
      </el-menu>
    </div>
    <div class="category-center">
      <component :is="currentComponent" :typeId="typeId" :bannerList="carouselList"></component>
    </div>
    <div class="category-right">
      <limitedFlashSale></limitedFlashSale>
    </div>
  </div>
</template>
<script>
import banner from "./categoryComp/banner.vue";
import demoA from "./categoryComp/demoA.vue";
import chinaAndWestMedicine from "./categoryComp/chinaAndWestMedicine.vue";
import limitedFlashSale from "./categoryComp/limitedFlashSale.vue";

export default {
  name: "drugCategoryMenu",
  components: {
    demoA,
    banner,
    chinaAndWestMedicine,
    limitedFlashSale
  },
  props: [],
  data() {
    return {
      selCategory: -1,
      currentComponent: null,
      carouselList: [],
      categoryList: [],
      typeId:0,
    };
  },
  computed: {
  },
  watch: {},

  created() {
    this.getBannerData();

    this.showBanner();
    this.getCategoryList();
    document.body.addEventListener('click', this.handleBodyClick);
  },
  beforeDestroy() {
    document.body.removeEventListener('click', this.handleBodyClick);
  },
  methods: {
    handleBodyClick(event) {
      const wrapElement = this.$el;
      if (wrapElement.contains(event.target) && wrapElement !== event.target) {
        return;
      }
      this.currentComponent = banner;
    },
    getBannerData(){
      this.$httpApi("/api/v1/index/banner/list", {
        },
         "get"
      ).then(res => {
       res.data.forEach(item => {
         item.image_url = item.bannerImg
       })
       this.carouselList = res.data;
      })
    },
    handleSelect(item, index) {
      this.currentComponent = chinaAndWestMedicine;
      this.typeId = item.typeId;
      this.selCategory = index;
    },
    showBanner() {
      this.currentComponent = banner;
    },
    getCategoryList() {
      this.$httpApi("/api/v1/index/medicine/type", {
        },
         "get"
      ).then(res => {
        this.categoryList = res.data;
      })
      // this.categoryList = [
      //   { title: "中西成药", componentName: chinaAndWestMedicine },
      //   { title: "生活用品", componentName: demoA },
      //   { title: "普通食品", componentName: demoA },
      //   { title: "健康食品", componentName: demoA },
      //   { title: "健康器材", componentName: demoA },
      //   { title: "个人护理品", componentName: demoA },
      // ]
    },

  },
};
</script>
<style scoped lang="less">
.wrap {
  height: auto;
  display: flex;
  max-width: @width;

  .category-left {
    width: 224px;
    height: 334px;
    background: #FFFFFF;
    border-radius: 6px 6px 6px 6px;

    .category-title {
      width: 100%;
      height: 52px;
      padding-left: 39px;
      text-align: left;
      border-radius: 6px 6px 6px 6px;

      img {
        width: 24px;
        height: 24px;
        vertical-align: middle;
      }

      .text {
        font-family: PingFang SC, PingFang SC;
        font-weight: 600;
        font-size: 18px;
        color: #333333;
        text-align: left;
        margin-left: 6px;
        height: 52px;
        line-height: 52px;
        vertical-align: middle;
      }
    }

    .el-menu {
      background-color: transparent !important;
      border: 0px !important;

      /deep/ .el-menu-item {
        padding-left: 40px !important;
        padding-right: 24px !important;
        height: 44px !important;
        line-height: 44px !important;
        display: flex;
        justify-content: space-between;
        align-items: center;

        span {
          font-weight: 600;
          font-family: PingFang SC, PingFang SC;
          font-size: 16px;
          color: #333333;
          text-align: left;
        }

        .right-arrow {
          font-size: 20px;
          color: rgba(51, 51, 51, 0.5)
        }

        &:focus {
          background: #FDEDEC !important;

          span {
            color: #EF1F1F;
          }

          .right-arrow {
            font-size: 20px;
            color: #EF1F1F;
          }
        }

        &:hover {
          background: #FDEDEC !important;

          span {
            color: #EF1F1F;
            ;
          }

          .right-arrow {
            font-size: 20px;
            color: #EF1F1F;
          }
        }
      }

    }
  }

  .sel-category {
    background: #FDEDEC !important;
    span {
      color: #EF1F1F !important;
    }
    .right-arrow {
      font-size: 20px !important;
      color: #EF1F1F !important;
    }
  }

  .category-center {
    flex: 1;
    margin-left: 16px;
    margin-right: 16px;
    width: 100%;
    height: 334px;
    background: #fff;
    border-radius: 6px 6px 6px 6px;
  }

  .category-right {
    width: 256px;
    height: 334px;
    background: #FFFFFF;
    border-radius: 6px 6px 6px 6px;
    border: 1px solid #EDEDED;

  }
}
</style>
